// 定义全局指令 实现图片懒加载

import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install(app) {
    // app 是vue实例 app = createApp()
    app.directive('imgLazy', {
      // el:使用了指令的dom
      mounted(el, binding) {
        // 如果图片加载不出来 给一个默认突图
        el.src = defaultImg
        // console.log(el, binding.value)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // 图片从不可见区域 ---> 可见区域
            if (isIntersecting) {
              // 停止观察
              stop()
              // 将地址 赋值给 图片 发起请求
              el.src = binding.value
            }
          },
          { threshold: 0.1 }
        )
      }
    })
  }
}
